/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  ActivityIndicator
} from 'react-native';
import MyText from './src/view/MyText'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {text: '---', showActivityIndicator: true};
  }

  static alert_123() {
    alert('123')
  }

  // 请求数据
  toast() {
      this.toast("Hello RN")
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}
          onPress={()=>{console.log("AAA");}}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <Button 
          title="OK" 
          // onPress={ () => alert('OKKK') }
          // onPress={ () => this.alert_123() }
          onPress={ () => App.alert_123() }
          // FIXME --- 不生效
          // style={{width: 300, height: 300}}
          /> 
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }

  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }

  render() {
    return (
      <View style={{
        flex: 1, 
        flexDirection: 'column', 
        justifyContent: 'flex-end',
        alignItems: 'stretch'
        }}>
        {/* <View style={{height: 50, backgroundColor: 'powderblue'}} /> */}
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          // onChangeText={(text) => this.setState({text})}
          onChangeText={ (text) => { console.log(text); this.setState({text}); } }
          // onChangeText={ (text) => { console.log(text); this.setState({text}); console.log('AAA-000', this); } }
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }

  timerId = 0;

  testNum = 0;

  componentDidMount() {
    this.timerId = setInterval(
                      () => this.setState({showActivityIndicator: (++this.testNum % 2 === 0)}), 
                      3000);
  }

  componentDidUpdate() {
    console.log('AAA', 'componentDidUpdate', 
                'text', this.state.text,
                'testNum', this.testNum,
                'showActivityIndicator', this.state.showActivityIndicator);    
  }

  componentWillUnmount() {
      clearInterval(this.timerId);
  }

  onButtonClick_1() {
    console.log('AAA', 'show --- 111');
    this.setState({text: '1 2 3', showActivityIndicator: true});
    // console.log('AAA-000', this); // FIXME --- this对象过大，log输出大约需要10秒
    console.log('AAA', 'show --- 222');
  }

  onButtonClick_2() {
    console.log('AAA', 'hide --- 111');
    this.setState({text: '', showActivityIndicator: false});
    console.log('AAA', 'hide --- 222');
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>

        <Text>Text</Text>
        <Text>{this.state.text}</Text>
        <MyText>MyText</MyText>
        <MyText>{this.state.text}</MyText>

        <Text />
        { this.state.showActivityIndicator 
          && <ActivityIndicator animating={true} size="large" color="#0000ff" /> }
        <Text />
        <ActivityIndicator animating={this.state.showActivityIndicator} size="large" color="#ff0000" />
        <Text />

        <Button title='show' onPress={this.onButtonClick_1.bind(this)} />
        <Text />
        <Button title='hide' onPress={this.onButtonClick_2.bind(this)} />

      </View>
    );
  }

  /*
  * 动态生成 View
  */
  makeViews() {
    var views = [];
    for (let i = 0; i < 3; i++) {
      views.push(<Text key={i}>{i}</Text>);
    }
    return views;
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
      {this.makeViews()}
      </View>
    );
  }

  renderList(list) {
    return list.map(item => this.renderItem(item));
  }

  renderItem(item) {
    return <Text>{item}</Text>;
  }

  render() {
    const list = ['我是1', '我是2', '我是3', '我是4', '我是5'];
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <Text>Text</Text>
        {this.renderList(list)}
        <Text />
        {list.map(item => this.renderItem(item))}
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
